﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div {
				width: 400px;
			}
			.tab-button {
			  padding: 6px 10px;
			  border-top-left-radius: 3px;
			  border-top-right-radius: 3px;
			  border: 1px solid #ccc;
			  cursor: pointer;
			  background: #f0f0f0;
			  margin-bottom: -1px;
			  margin-right: -1px;
			}
			.tab-button:hover {
			  background: #e0e0e0;
			}
			.tab-button.active {
			  background: #cdcdcd;
			}
			.tab {
			  border: 1px solid #ccc;
			  padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button
			  v-for="tab in tabs"
			  :key="tab.title"
			  :class="['tab-button', { active: currentTab === tab.title }]"
			  @click="currentTab = tab.title">
			  {{ tab.displayName }}
			</button>
			<keep-alive>
				<component
				  v-bind:is="currentTabComponent"
				  class="tab">
				</component>
			</keep-alive>
		</div>
	    <script src="https://unpkg.com/vue@next"></script>
		<script>
		    const app = Vue.createApp({
		        data() {
		            return {
		                currentTab: 'introduce',
    			        tabs: [
    			    	    {title: 'introduce', displayName: '图书介绍'}, 
    			    	    {title: 'comment', displayName: '图书评价'},
    				   	    {title: 'qa', displayName: '图书问答'}
    			        ]    
		            }
			    },
			    computed: {
			        currentTabComponent: function () {
			            return 'tab-' + this.currentTab
			        }
			    }
		    });
			app.component('tab-introduce', { 
				data(){
					return {
						content: 'Java无难事'
					}
				},
				template: '<div><input v-model="content"></div>'
			})
			app.component('tab-comment', {
				template: '<div>这是一本好书</div>',
				data(){
					return {
						count: 0
					}
				},
				beforeCreate () {
    			    console.log('--------' + 'beforeCreated' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    created () {
    			    console.log('--------' + 'created' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    beforeMount () {
    			    console.log('--------' + 'beforeMount' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    mounted () {
    			    console.log('--------' + 'mounted' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    beforeUpdate () {
    			  	console.log('--------' + 'beforeUpdate' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    updated () {
    			    console.log('--------' + 'updated' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    activated () {
    			  	console.log('--------' + 'activated' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    deactivated () {
    			  	console.log('--------' + 'deactivated' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    beforeUnmount () {
    			    console.log('--------' + 'beforeUnmount' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			    unmounted () {
    			    console.log('--------' + 'unmounted' + '--------')
    			    console.log("$el: " + this.$el)
    			    console.log(this.$data)
    			    console.log("data.count: " + this.count)
			    },
			})
			app.component('tab-qa', { 
				template: '<div>有人看过吗？怎么样？</div>' 
			})
            
            const vm = app.mount('#app');
		</script>
	</body>
</html>